<!-- 优惠券中心  -->
<template>
	<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
		<s-empty v-if="state.total === 0" icon="/static/coupon-empty.png" text="暂无数据"></s-empty>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd list-box" v-for="(item, index) in state.items" :key="index">
					<view class="list-num">{{ index + 1 }}</view>
					<view class="img-box">
						<image class="img-img" :src="`${item.img}?${index}`" mode="widthFix"></image>
					</view>
					<view class="list-name">{{ item.name }}</view>
					<view>
						<checkbox :value="item.value" :checked="item.checked" style="transform: scale(0.7)" />
					</view>
				</label>
			</checkbox-group>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
		contentdown: '上拉加载更多',
	}" @tap="loadmore" />
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import _ from 'lodash';

// 数据
const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1,
};

const state = reactive({
	selected: [], // 用于绑定选中的checkbox值
	loadStatus: '',
	total: 1,
	items: [{
		id:1,
		img: "https://picsum.photos/20/20",
		value: 'USA',
		name: '美国',
		checked: false
	},
	{
		id:2,
		img: "https://picsum.photos/20/20",
		value: 'CHN',
		name: '中国',
		checked: false
	},
	{
		id:3,
		img: "https://picsum.photos/20/20",
		value: 'BRA',
		name: '巴西',
		checked: false
	},
	{
		id:4,
		img: "https://picsum.photos/20/20",
		value: 'JPN',
		name: '日本',
		checked: false
	},
	{
		id:5,
		img: "https://picsum.photos/20/20",
		value: 'ENG',
		name: '英国',
		checked: false
	},
	{
		id:6,
		img: "https://picsum.photos/20/20",
		value: 'FRA',
		name: '法国',
		checked: false
	},
	],
});

function checkboxChange(e) {
	console.log(e)
}
// async function getData(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	const res = await sheep.$api.coupon.list({
// 		list_rows,
// 		page
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// async function getCoupon(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	let res = await sheep.$api.coupon.userCoupon({
// 		type: state.type,
// 		list_rows,
// 		page,
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		if (state.currentTab == 0) {
			getData(state.pagination.current_page + 1);
		} else {
			getCoupon(state.pagination.current_page + 1);
		}
	}
}

onLoad((Option) => {

});
onReachBottom(() => {
	loadmore();
});
</script>
<style lang="scss" scoped>
.btn-zhuti-box {
	display: flex;
}

.btn-zhuti-box>button {
	margin-right: 10rpx;
}

.btn-zhuti-box>button:last-child {
	margin-right: 0;
}

.uni-list {
	padding: 15rpx 10rpx;
}

.list-box {
	display: flex;
	align-items: center;
	padding: 5rpx 20rpx;
	border-bottom: 1rpx solid #c1c1c1;
}

.list-num {
	padding: 10rpx;
}

.list-name {
	flex-grow: 1;
	margin-left: 20rpx;
}

.img-box {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}

.img-img {
	width: 100%;
	border-radius: 10rpx;
}
</style>